<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>答题系统 - 快答答题</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa, #e6f0ff);
            color: #333;
            line-height: 1.6;
            min-height: 100vh;
            padding-bottom: 20px;
        }
        
        /* 统一标题栏样式 */
        #header {
            background: linear-gradient(90deg, #2575fc, #6a11cb);
            padding: 12px 16px;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .header_con {
            display: flex;
            align-items: center;
            max-width: 800px;
            margin: 0 auto;
            position: relative;
        }
        
        .back {
            display: flex;
            align-items: center;
            text-decoration: none;
            color: white;
            font-size: 16px;
            font-weight: 500;
            transition: all 0.3s ease;
            padding: 8px 12px;
            position: absolute;
            left: 0;
        }
        
        .back:hover {
            transform: translateX(-5px);
        }
        
        .back span {
            display: inline-block;
            width: 20px;
            height: 20px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"/></svg>') no-repeat center;
            background-size: contain;
        }
        
        .top_tit {
            flex: 1;
            text-align: center;
            font-size: 18px;
            font-weight: 600;
            color: white;
            text-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }
        
        .right_div {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }
        
        .right_div a {
            display: block;
            padding: 8px 16px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            color: white;
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        
        .right_div a:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
        }
        
        /* 主内容区域 */
        #content_div {
            max-width: 800px;
            margin: 20px auto;
            padding: 15px;
        }
        
        /* 答题卡片 */
        .answer-card {
            background: white;
            border-radius: 16px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
            overflow: hidden;
            position: relative;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .answer-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }
        
        .answer-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, #6a11cb, #2575fc);
        }
        
        .question-header {
            padding: 20px;
            border-bottom: 1px solid #f0f5ff;
        }
        
        .question-title {
            font-size: 18px;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 10px;
        }
        
        .question-number {
            display: inline-block;
            background: linear-gradient(135deg, #2575fc, #6a11cb);
            color: white;
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 14px;
            margin-right: 8px;
        }
        
        /* 选项区域 */
        .options-container {
            padding: 15px;
        }
        
        .option-item {
            display: flex;
            align-items: center;
            padding: 15px;
            margin-bottom: 12px;
            background: #f8fbff;
            border-radius: 12px;
            border: 1px solid #e6f0ff;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .option-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(37, 117, 252, 0.15);
            border-color: #2575fc;
        }
        
        .option-item.selected {
            background: #e6f0ff;
            border-color: #2575fc;
        }
        
        .option-item.correct {
            background: #e8f9f0;
            border-color: #34c759;
            animation: pulse 0.5s ease;
        }
        
        .option-item.incorrect {
            background: #ffefef;
            border-color: #ff3b30;
            animation: shake 0.5s ease;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.03); }
            100% { transform: scale(1); }
        }
        
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
        }
        
        .option-letter {
            width: 36px;
            height: 36px;
            min-width: 36px;
            border-radius: 50%;
            background: #e6f0ff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: #2575fc;
            margin-right: 15px;
            font-size: 16px;
            transition: all 0.3s ease;
        }
        
        .option-item.selected .option-letter {
            background: linear-gradient(135deg, #2575fc, #6a11cb);
            color: white;
        }
        
        .option-item.correct .option-letter {
            background: #34c759;
            color: white;
        }
        
        .option-item.incorrect .option-letter {
            background: #ff3b30;
            color: white;
        }
        
        .option-text {
            flex: 1;
            font-size: 16px;
            color: #2c3e50;
        }
        
        /* 倒计时 */
        .countdown-container {
            display: flex;
            align-items: center;
            justify-content: center;
            background: white;
            border-radius: 16px;
            padding: 15px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
        }
        
        .countdown-icon {
            width: 32px;
            height: 32px;
            background: linear-gradient(135deg, #2575fc, #6a11cb);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            margin-right: 12px;
        }
        
        .countdown-text {
            font-size: 18px;
            font-weight: 600;
            color: #2575fc;
        }
        
        .countdown-text.warning {
            color: #ff9500;
        }
        
        .countdown-text.danger {
            color: #ff3b30;
            animation: pulse 0.5s infinite alternate;
        }
        
        /* 解析区域 */
        .explanation-card {
            background: white;
            border-radius: 16px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            padding: 20px;
            margin-top: 20px;
            display: none;
        }
        
        .explanation-header {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .explanation-title {
            font-size: 18px;
            font-weight: 600;
            color: #ff9500;
        }
        
        .answer-badge {
            background: #34c759;
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 16px;
            font-weight: 600;
            margin-left: 12px;
        }
        
        .explanation-content {
            background: #f8fbff;
            border-radius: 12px;
            padding: 15px;
            border-left: 3px solid #2575fc;
        }
        
        .explanation-content p {
            font-size: 16px;
            color: #2c3e50;
            line-height: 1.6;
        }
        
        /* 操作按钮 */
        .action-buttons {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }
        
        .action-button {
            flex: 1;
            padding: 16px;
            border: none;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }
        
        .action-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
        }
        
        .action-button.next {
            background: linear-gradient(90deg, #2575fc, #6a11cb);
        }
        
        .action-button.submit {
            background: linear-gradient(90deg, #34c759, #2dd4bf);
        }
        
        .action-button.disabled {
            background: #cccccc;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        /* 进度条 */
        .progress-container {
            background: white;
            border-radius: 16px;
            padding: 15px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
        }
        
        .progress-label {
            font-size: 16px;
            font-weight: 500;
            color: #2c3e50;
            margin-right: 15px;
            white-space: nowrap;
        }
        
        .progress-bar {
            flex: 1;
            height: 10px;
            background: #e6f0ff;
            border-radius: 5px;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #6a11cb, #2575fc);
            border-radius: 5px;
            width: 20%;
            transition: width 0.5s ease;
        }
        
        /* 结果页面 */
        .result-container {
            background: white;
            border-radius: 16px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            padding: 30px;
            text-align: center;
            margin: 20px 0;
        }
        
        .result-title {
            font-size: 24px;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 20px;
        }
        
        .score-display {
            font-size: 72px;
            font-weight: 800;
            background: linear-gradient(135deg, #6a11cb, #2575fc);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            margin: 20px 0;
        }
        
        .score-text {
            font-size: 20px;
            color: #555;
            margin-bottom: 30px;
        }
        
        .result-details {
            text-align: left;
            margin: 20px 0;
        }
        
        .result-item {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
        }
        
        .result-label {
            font-weight: 500;
            color: #555;
        }
        
        .result-value {
            font-weight: 600;
            color: #2c3e50;
        }
        
        .result-value.correct {
            color: #34c759;
        }
        
        .result-value.incorrect {
            color: #ff3b30;
        }
        
        /* 响应式设计 */
        @media (max-width: 480px) {
            .question-title {
                font-size: 16px;
            }
            
            .option-text {
                font-size: 15px;
            }
            
            .countdown-text {
                font-size: 16px;
            }
            
            .action-buttons {
                flex-direction: column;
            }
            
            .score-display {
                font-size: 56px;
            }
        }
    </style>
</head>
<body>
    <!-- 标题栏 -->
    <header id="header">
        <div class="header_con">
            <a href="index.html" class="back">
                <span></span>
            </a> 
            <div class="top_tit">答题挑战</div>
            <div class="right_div">
                <a href="ranking.html">排行榜</a>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <div id="content_div">
        <!-- 进度条 -->
        <div class="progress-container">
            <div class="progress-label">答题进度</div>
            <div class="progress-bar">
                <div class="progress-fill" id="progressFill"></div>
            </div>
        </div>
        
        <!-- 倒计时 -->
        <div class="countdown-container">
            <div class="countdown-icon">
                <i class="fas fa-clock"></i>
            </div>
            <div class="countdown-text" id="countdownText">倒计时：15秒</div>
        </div>
        
        <!-- 答题卡片 -->
        <div class="answer-card" id="questionCard">
            <div class="question-header">
                <span class="question-number" id="questionNumber">1</span>
                <h2 class="question-title" id="questionTitle">长期用耳机容易诱发耳聋，是因为？</h2>
            </div>
            
            <div class="options-container" id="optionsContainer">
                <!-- 选项由JS动态生成 -->
            </div>
        </div>
        
        <!-- 解析区域 -->
        <div class="explanation-card" id="explanationCard">
            <div class="explanation-header">
                <h3 class="explanation-title">解析</h3>
                <div class="answer-badge" id="correctAnswerBadge">答案：B</div>
            </div>
            
            <div class="explanation-content">
                <p id="explanationText">这是因为持续性噪音中的脉冲式噪音（如MP3里传出的声音）比稳态噪音对听力的损伤要大，当人耳听到的音量超过85分贝时，时间较长可造成听觉疲劳；当音量高达110分贝以上时，足以使人体内耳的毛细胞死亡。耳蜗上感受声音的毛细胞一旦受损，就会造成语言识别力下降，而这样的损伤是不可逆的，耳机的音量输出一般在84分贝到120分贝，声音过大，每次听得时间过长会影响听觉神经。如果在疲劳的状态下戴耳机听MP3，对听力的损害就会更加严重。</p>
            </div>
        </div>
        
        <!-- 操作按钮 -->
        <div class="action-buttons">
            <button class="action-button next" id="nextButton">下一题</button>
            <button class="action-button submit" id="submitButton">提交答案</button>
        </div>
        
        <!-- 结果页面（初始隐藏） -->
        <div class="result-container" id="resultContainer" style="display: none;">
            <h2 class="result-title">答题完成！</h2>
            <div class="score-display" id="totalScore">0</div>
            <div class="score-text" id="scoreText">您答对了0题，获得0分</div>
            
            <div class="result-details">
                <div class="result-item">
                    <span class="result-label">总题数：</span>
                    <span class="result-value">5题</span>
                </div>
                <div class="result-item">
                    <span class="result-label">答对题数：</span>
                    <span class="result-value correct" id="correctCount">0题</span>
                </div>
                <div class="result-item">
                    <span class="result-label">答错题数：</span>
                    <span class="result-value incorrect" id="incorrectCount">0题</span>
                </div>
                <div class="result-item">
                    <span class="result-label">用时：</span>
                    <span class="result-value" id="timeUsed">0秒</span>
                </div>
            </div>
            
            <button class="action-button submit" id="restartButton">重新开始</button>
        </div>
    </div>

    <script>
        // 题目数据
        const questions = [
            {
                id: 1,
                title: "长期用耳机容易诱发耳聋，是因为？",
                options: [
                    { id: "A", text: "耳机紧紧压在耳朵里，造成听力神经紧张" },
                    { id: "B", text: "耳机音量较大，容易造成听觉疲劳或者导致人体内耳的毛细胞死亡" },
                    { id: "C", text: "耳机材质不好，容易滋生细菌" },
                    { id: "D", text: "总觉得耳朵里面有东西" }
                ],
                correctAnswer: "B",
                explanation: "这是因为持续性噪音中的脉冲式噪音（如MP3里传出的声音）比稳态噪音对听力的损伤要大，当人耳听到的音量超过85分贝时，时间较长可造成听觉疲劳；当音量高达110分贝以上时，足以使人体内耳的毛细胞死亡。耳蜗上感受声音的毛细胞一旦受损，就会造成语言识别力下降，而这样的损伤是不可逆的，耳机的音量输出一般在84分贝到120分贝，声音过大，每次听得时间过长会影响听觉神经。如果在疲劳的状态下戴耳机听MP3，对听力的损害就会更加严重。"
            },
            {
                id: 2,
                title: "以下哪种食物最适合在运动后补充能量？",
                options: [
                    { id: "A", text: "炸鸡" },
                    { id: "B", text: "巧克力" },
                    { id: "C", text: "香蕉" },
                    { id: "D", text: "冰淇淋" }
                ],
                correctAnswer: "C",
                explanation: "香蕉富含碳水化合物、钾和维生素B6，能快速补充能量并帮助肌肉恢复。同时，香蕉中的天然糖分能够迅速提升血糖水平，是运动后理想的能量补充食物。"
            },
            {
                id: 3,
                title: "下列哪种行为最有利于环境保护？",
                options: [
                    { id: "A", text: "使用一次性餐具" },
                    { id: "B", text: "乘坐公共交通出行" },
                    { id: "C", text: "购买瓶装水" },
                    { id: "D", text: "使用塑料袋购物" }
                ],
                correctAnswer: "B",
                explanation: "乘坐公共交通出行可以减少个人汽车使用，从而降低碳排放和空气污染。公共交通系统能够更高效地运输乘客，相比私家车能减少约50%的二氧化碳排放量。"
            },
            {
                id: 4,
                title: "人体最大的器官是什么？",
                options: [
                    { id: "A", text: "肝脏" },
                    { id: "B", text: "大脑" },
                    { id: "C", text: "皮肤" },
                    { id: "D", text: "肺" }
                ],
                correctAnswer: "C",
                explanation: "皮肤是人体最大的器官，成年人的皮肤总面积约为1.5-2平方米，重量约占体重的16%。皮肤不仅起到保护身体的作用，还具有调节体温、感受外界刺激、排泄废物等多种功能。"
            },
            {
                id: 5,
                title: "下列哪项不是人工智能的主要应用领域？",
                options: [
                    { id: "A", text: "自然语言处理" },
                    { id: "B", text: "图像识别" },
                    { id: "C", text: "数据存储" },
                    { id: "D", text: "机器学习" }
                ],
                correctAnswer: "C",
                explanation: "数据存储是信息技术基础设施的一部分，而非人工智能的直接应用领域。人工智能主要涉及模拟人类智能行为的技术，如自然语言处理（理解和生成人类语言）、图像识别（识别和理解图像内容）和机器学习（让计算机从数据中学习）。"
            }
        ];
        
        // 全局变量
        let currentQuestionIndex = 0;
        let selectedAnswer = null;
        let userAnswers = [];
        let score = 0;
        let timeLeft = 15;
        let totalTime = 0;
        let countdownInterval;
        let startTime;
        
        // DOM元素
        const questionNumberEl = document.getElementById('questionNumber');
        const questionTitleEl = document.getElementById('questionTitle');
        const optionsContainerEl = document.getElementById('optionsContainer');
        const explanationCardEl = document.getElementById('explanationCard');
        const correctAnswerBadgeEl = document.getElementById('correctAnswerBadge');
        const explanationTextEl = document.getElementById('explanationText');
        const nextButtonEl = document.getElementById('nextButton');
        const submitButtonEl = document.getElementById('submitButton');
        const countdownTextEl = document.getElementById('countdownText');
        const progressFillEl = document.getElementById('progressFill');
        const resultContainerEl = document.getElementById('resultContainer');
        const totalScoreEl = document.getElementById('totalScore');
        const scoreTextEl = document.getElementById('scoreText');
        const correctCountEl = document.getElementById('correctCount');
        const incorrectCountEl = document.getElementById('incorrectCount');
        const timeUsedEl = document.getElementById('timeUsed');
        const restartButtonEl = document.getElementById('restartButton');
        
        // 初始化页面
        function initializeQuiz() {
            currentQuestionIndex = 0;
            selectedAnswer = null;
            userAnswers = [];
            score = 0;
            timeLeft = 15;
            totalTime = 0;
            
            resultContainerEl.style.display = 'none';
            explanationCardEl.style.display = 'none';
            nextButtonEl.classList.remove('disabled');
            submitButtonEl.classList.remove('disabled');
            
            loadQuestion();
            startTimer();
            startTime = new Date();
        }
        
        // 加载题目
        function loadQuestion() {
            const currentQuestion = questions[currentQuestionIndex];
            
            // 更新题目信息
            questionNumberEl.textContent = currentQuestion.id;
            questionTitleEl.textContent = currentQuestion.title;
            
            // 更新进度条
            const progressPercentage = (currentQuestionIndex / questions.length) * 100;
            progressFillEl.style.width = `${progressPercentage}%`;
            
            // 清空选项容器
            optionsContainerEl.innerHTML = '';
            
            // 添加选项
            currentQuestion.options.forEach(option => {
                const optionItem = document.createElement('div');
                optionItem.className = 'option-item';
                optionItem.dataset.optionId = option.id;
                
                const optionLetter = document.createElement('div');
                optionLetter.className = 'option-letter';
                optionLetter.textContent = option.id;
                
                const optionText = document.createElement('div');
                optionText.className = 'option-text';
                optionText.textContent = option.text;
                
                optionItem.appendChild(optionLetter);
                optionItem.appendChild(optionText);
                
                optionItem.addEventListener('click', () => {
                    if (explanationCardEl.style.display === 'block') return;
                    
                    // 移除之前的选择
                    const selected = document.querySelector('.option-item.selected');
                    if (selected) selected.classList.remove('selected');
                    
                    // 设置当前选择
                    optionItem.classList.add('selected');
                    selectedAnswer = option.id;
                });
                
                optionsContainerEl.appendChild(optionItem);
            });
            
            // 重置倒计时
            timeLeft = 15;
            updateCountdownText();
            countdownTextEl.classList.remove('warning', 'danger');
            
            // 更新按钮文本
            if (currentQuestionIndex === questions.length - 1) {
                nextButtonEl.textContent = '完成';
            } else {
                nextButtonEl.textContent = '下一题';
            }
            
            // 重置解析区域
            explanationCardEl.style.display = 'none';
        }
        
        // 启动计时器
        function startTimer() {
            clearInterval(countdownInterval);
            
            countdownInterval = setInterval(() => {
                timeLeft--;
                totalTime++;
                updateCountdownText();
                
                if (timeLeft <= 5 && timeLeft > 0) {
                    countdownTextEl.classList.add('warning');
                }
                
                if (timeLeft <= 3) {
                    countdownTextEl.classList.remove('warning');
                    countdownTextEl.classList.add('danger');
                }
                
                if (timeLeft <= 0) {
                    clearInterval(countdownInterval);
                    countdownTextEl.textContent = "时间到！";
                    submitAnswer();
                }
            }, 1000);
        }
        
        // 更新倒计时文本
        function updateCountdownText() {
            countdownTextEl.textContent = `倒计时：${timeLeft}秒`;
        }
        
        // 提交答案
        function submitAnswer() {
            if (explanationCardEl.style.display === 'block') return;
            
            clearInterval(countdownInterval);
            
            const currentQuestion = questions[currentQuestionIndex];
            const isCorrect = selectedAnswer === currentQuestion.correctAnswer;
            
            // 记录用户答案
            userAnswers.push({
                questionId: currentQuestion.id,
                selectedAnswer: selectedAnswer,
                isCorrect: isCorrect
            });
            
            // 更新分数
            if (isCorrect) {
                score += 20;
                showNotification('回答正确！+20分');
            } else {
                showNotification(`回答错误，正确答案是${currentQuestion.correctAnswer}`);
            }
            
            // 显示正确答案
            const options = document.querySelectorAll('.option-item');
            options.forEach(option => {
                const optionId = option.dataset.optionId;
                option.classList.remove('selected');
                
                if (optionId === currentQuestion.correctAnswer) {
                    option.classList.add('correct');
                } else if (optionId === selectedAnswer) {
                    option.classList.add('incorrect');
                }
                
                // 禁用点击
                option.style.pointerEvents = 'none';
            });
            
            // 显示解析
            correctAnswerBadgeEl.textContent = `答案：${currentQuestion.correctAnswer}`;
            explanationTextEl.textContent = currentQuestion.explanation;
            explanationCardEl.style.display = 'block';
            
            // 如果是最后一题，更新按钮状态
            if (currentQuestionIndex === questions.length - 1) {
                nextButtonEl.textContent = '查看结果';
                submitButtonEl.classList.add('disabled');
            }
        }
        
        // 显示通知
        function showNotification(message) {
            // 创建通知元素
            const notification = document.createElement('div');
            notification.style.cssText = `
                position: fixed;
                top: 20px;
                left: 50%;
                transform: translateX(-50%);
                background: rgba(37, 117, 252, 0.9);
                color: white;
                padding: 12px 25px;
                border-radius: 30px;
                box-shadow: 0 5px 15px rgba(37, 117, 252, 0.3);
                z-index: 2000;
                opacity: 0;
                transition: opacity 0.3s, top 0.3s;
                white-space: nowrap;
            `;
            notification.textContent = message;
            document.body.appendChild(notification);
            
            // 显示通知
            setTimeout(() => {
                notification.style.opacity = '1';
                notification.style.top = '30px';
            }, 10);
            
            // 3秒后移除通知
            setTimeout(() => {
                notification.style.opacity = '0';
                notification.style.top = '20px';
                setTimeout(() => {
                    document.body.removeChild(notification);
                }, 300);
            }, 3000);
        }
        
        // 显示结果
        function showResults() {
            const endTime = new Date();
            const timeSpent = Math.floor((endTime - startTime) / 1000);
            
            // 计算正确和错误数量
            const correctCount = userAnswers.filter(answer => answer.isCorrect).length;
            const incorrectCount = questions.length - correctCount;
            
            // 更新结果页面
            totalScoreEl.textContent = score;
            scoreTextEl.textContent = `您答对了${correctCount}题，获得${score}分`;
            correctCountEl.textContent = `${correctCount}题`;
            incorrectCountEl.textContent = `${incorrectCount}题`;
            timeUsedEl.textContent = `${timeSpent}秒`;
            
            // 显示结果页面
            resultContainerEl.style.display = 'block';
            document.getElementById('questionCard').style.display = 'none';
            document.querySelector('.countdown-container').style.display = 'none';
            document.querySelector('.progress-container').style.display = 'none';
            explanationCardEl.style.display = 'none';
            nextButtonEl.style.display = 'none';
            submitButtonEl.style.display = 'none';
        }
        
        // 事件监听
        submitButtonEl.addEventListener('click', submitAnswer);
        
        nextButtonEl.addEventListener('click', () => {
            if (explanationCardEl.style.display !== 'block') {
                showNotification('请先提交本题答案');
                return;
            }
            
            if (currentQuestionIndex < questions.length - 1) {
                currentQuestionIndex++;
                selectedAnswer = null;
                loadQuestion();
                startTimer();
            } else {
                showResults();
            }
        });
        
        restartButtonEl.addEventListener('click', () => {
            document.getElementById('questionCard').style.display = 'block';
            document.querySelector('.countdown-container').style.display = 'flex';
            document.querySelector('.progress-container').style.display = 'flex';
            nextButtonEl.style.display = 'block';
            submitButtonEl.style.display = 'block';
            initializeQuiz();
        });
        
        // 初始化答题系统
        initializeQuiz();
    </script>
</body>
</html>